<script lang="ts" setup>
defineProps<{
  title: string
  value: number
}>()
</script>

<template>
  <div class="border-box-1-container" flex flex-col items-center justify-center>
    <span class="text-[26px] leading-loose">
      {{ title }}
    </span>
    <span class="text-[36px] leading-loose font-black">{{ value }}</span>
  </div>
</template>

<style lang="scss" scoped>
.border-box-1-container {
  position: relative;
  background: linear-gradient(270deg, #1b75ff 0%, rgba(19, 34, 57, 0.22) 100%);
  border-radius: 0px 0px 0px 0px;
  border: 4px solid;
  border-image: linear-gradient(206deg, rgba(0, 176, 255, 1), rgba(0, 106, 153, 1)) 4 4;
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 25px), calc(100% - 25px) 100%, 0 100%);
}
.border-box-1-container::after {
  content: '';
  position: absolute;
  bottom: -27px;
  right: -27px;
  width: 50px; /* 根据需要调整宽度 */
  height: 50px; /* 根据需要调整高度 */
  background: rgba(0, 176, 255, 1); /* 右下角的渐变色 */
  z-index: 1;
  clip-path: polygon(20px 0, 50px 0, 50px 50px, 0 50px, 0 20px);
}
.border-box-1-container::before {
  content: '';
  position: absolute;
  top: 0px;
  left: 0px;
  width: 20px;
  height: 20px;
  background: linear-gradient(to bottom right, #01e5fe 0%, #0a0d1c 100%);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
</style>
